<template>
  <div class="index-container">
    <div class="nav" >
      <ul>
        <li>
          <router-link to="/discovery">
            <span class="iconfont icon-find-music"></span>
            发现音乐
          </router-link>
        </li>
        <li>
          <router-link to="/playlists">
            <span class="iconfont icon-music-list"></span>
            推荐歌单
          </router-link>
        </li>
        <li>
          <router-link to="/songs">
            <span class="iconfont icon-music"></span>
            最新音乐
          </router-link>
        </li>
        <li>
          <router-link to="/mvs">
            <span class="iconfont icon-mv"></span>
            最新MV
          </router-link>
        </li>
        <li>
          <router-link to="/myLove?id=2522271121">
            <span class="iconfont el-icon-star-off"></span>
            我的歌单
          </router-link>
        </li>

      </ul>



    </div>
    <div class="main">
      <router-view></router-view>
    </div>
    <div class="player">
      <audio  style="background-color: rgba(250, 250, 250, .5);border-radius:10%" ref="audio" :src='this.$store.state.baseUrl' @ended="change" autoplay controls></audio>
    </div>
  </div>
</template>

<script>
// 获取url
import {getLunBoMusic} from '@/api/getMusic'
import { mapActions } from 'vuex'
export default {
  name: 'index',
  data() {
    return {
      musicUrl:"http://m7.music.126.net/20200303182550/8aa5971b1630d1527a922ccd2b97f392/ymusic/035d/0109/520e/478f86cc9f6c6539f7c8ed3e06c1bf8e.mp3"
    };
  },
  mounted() {
    console.log(this.$refs.audio.ended);

  },
  methods: {

   async change(){
    // 当快要结束以后,进行下一首的播放
    this.$store.dispatch('getAction')

    // 获取到在当前播放列表的索引
    // const id=this.$store.state.musicArr.findIndex(item=>{
    //   return item.id===this.$store.state.id
    // })
    // // 获取下一个id
    // // 进行数据的请求
    // const nextId=this.$store.state.musicArr[id+1].id
    // 发送请求
    },

  },
};
</script>

<style scoped >
</style>
